<!--用户管理页-->

<template>
    <div style="height: 6vh;background-color: #fff;padding: 10px 20px;">
        <span style="line-height: 60px;font-size: 20px">用户管理</span>
        <el-button @click="beforeAddUser" type="primary" style="float: right;margin-top: 10px">新建用户</el-button>
    </div>
<!--    新建用户的弹窗-->
    <el-dialog
        :title="dialogTitle"
        v-model="dialogVisiable"
        :before-close="handleClose"
        style="width: 800px;padding: 40px">
        <el-form label-width="80px" label-position="top">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="用户名">
                        <el-input v-model="saveUser.username" placeholder="请输入用户名" :disabled="saveUser.id!=null"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号">
                        <el-input v-model="saveUser.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="邮箱">
                        <el-input v-model="saveUser.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input v-model="saveUser.age" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="10">
                <el-col :span="6">
                   <el-form-item label="职级">
                       <el-select placeholder="请选择" v-model="saveUser.level" @change="loadLeader">
                           <el-option :value="it.value" :label="it.lable" v-for="it in levelOptions"></el-option>
                       </el-select>
                   </el-form-item>
                </el-col>
                
                <el-col :span="6">
                   <el-form-item label="直属领导">
                       <el-select placeholder="请选择" v-model="saveUser.parentId">
                           <el-option :value="it.id" :label="it.username" v-for="it in leaderOptions"></el-option>
                       </el-select>
                   </el-form-item>
                </el-col>
                
                <el-col :span="6">
                    <el-form-item label="性别">
                        <el-radio-group v-model="saveUser.gender">
                            <el-radio border value="1" label="男" style="margin-right: 10px"></el-radio>
                            <el-radio border value="0" label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                
                <el-col :span="6">
                    <el-form-item label="用户状态">
                        <el-radio-group v-model="saveUser.status">
                            <el-radio border value="1" label="启用" style="margin-right: 10px"></el-radio>
                            <el-radio border value="0" label="禁用"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center">
            <el-button type="success" @click="addUser" v-text="submit"></el-button>
            <el-button type="warning" @click="handleClose">取消</el-button>
        </div>
    </el-dialog>
<!--    用户搜索卡片-->
    <el-card  style="margin: 20px;height: 70px;">
        <el-form :inline="true">
            <el-form-item label="用户搜索" @keydown.enter="loadUser">
                <el-input v-model="searchUserForm.username" placeholder="请输入用户名" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="用户状态" >
               <el-select @change="loadUser" v-model="searchUserForm.status" placeholder="请选择用户状态" style="width: 220px">
                 <el-option label="启用" value="1"></el-option>
                 <el-option label="禁用" value="0"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetSeacher">重置</el-button>
                <el-button @click="loadUser" type="primary">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="overflow:hidden">
        <el-table :data="userArr">
            <el-table-column type="index" label="编号" width="80px"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="createTime" label="加入时间"></el-table-column>
            <el-table-column prop="status" label="用户状态">
              <template #default="scope">
                <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" :disabled="scope.row.level==40" @change="changeStatus(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column>
              <template #default="scope">
                  <el-button link type="primary" :disabled="scope.row.level==40" @click="resetPwd(scope.row.id)">密码重置</el-button>
                  <el-button link type="primary" :disabled="scope.row.level==40" @click="editUser(scope.row)">编辑</el-button>
                  <el-button link type="primary" :disabled="scope.row.level==40" @click="deleteUser(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
 import {ElMessage, ElMessageBox} from "element-plus";
 import axios from "axios";
 import qs from "qs";
 
 const dialogVisiable=ref(false)
 
 const saveUser=ref({
     username:'',
     phone:'',
     email:'',
     age :'',
     level:'',
     parentId:'',
     gender:'',
     status:'',
 })
 
 const levelOptions=ref([
     {lable:"员工",value:'10'},
     {lable:"经理",value:'20'},
     {lable:"总监",value:'30'},
     {lable:"总裁",value:'40'},
 ])
 
 const leaderOptions=ref([
 ])

const loadLeader=()=>{
     let level=parseInt(saveUser.value.level)+10;
     saveUser.value.parentId=''
     axios.get(BASE_URL+'/v1/user/select?level='+level)
         .then((res)=>{
             if (res.data.code===2000){
                 leaderOptions.value=res.data.data;
             }
         })
    
}
 
 const addUser=()=>{
     let data=qs.stringify(saveUser.value)
     console.log(data)
     if (saveUser.value.username&&saveUser.value.username.trim()){
         axios.post(window.BASE_URL+'/v1/user/save',data)
             .then((res)=>{
                 if (res.data.code===2000){
                     ElMessage.success("添加成功!")
                     dialogVisiable.value=false
                     saveUser.value={}
                     loadUser();
                 }else {
                     ElMessage.error(res.data.msg)
                 }
             })
         
     }else {
         ElMessage.error("用户名不能为空")
     }
     
 }
 
 const handleClose=()=>{
     ElMessageBox.confirm(
         "您确认要关闭弹窗吗？",
         "提示",
         {
            confirmButtonText:"确认",
            cancelButtonText:"取消",
             type:"warning"
         }
     ).then(()=> {
         dialogVisiable.value=false;
         saveUser.value={}
     })
 }
 
 //定义对象来保存用户搜索条件
 const searchUserForm=ref({username:'',status:''});
 //定义数组对象用来保存请求回来的用户数据
 const userArr=ref([]);
 //定义加载用户数据的方法
 const loadUser=()=>{
     let data=qs.stringify(searchUserForm.value)
     axios.get(BASE_URL+'/v1/user/select?'+data)
         .then((res)=>{
             if (res.data.code===2000){
                 userArr.value=res.data.data;
             }else {
                 ElMessage.error(res.data.msg)
             }
     })
 }
 const resetSeacher=()=>{
    searchUserForm.value={};
    loadUser();
 }
 
 onMounted(()=>{
     loadUser();
 })

const resetPwd=(userId)=>{
     axios.post(BASE_URL+'/v1/user/update/password/'+userId)
         .then((res)=>{
             if (res.data.code===2000){
                 ElMessage.success("密码重置成功！")
             }else{
                 ElMessage.error(res.data.msg)
             }
         })
     
}

const dialogTitle=ref('')
const editUser=(user)=>{
     dialogVisiable.value=true;
     dialogTitle.value="编辑用户"
    submit.value="更新"
     axios.get(BASE_URL+'/v1/user/select?id='+user.id)
         .then((res)=>{
             if (res.data.code===2000){
                 saveUser.value=res.data.data[0];
                 let level=parseInt(saveUser.value.level)+10;
                 axios.get(BASE_URL+'/v1/user/select?level='+level)
                     .then((res)=>{
                         if (res.data.code===2000){
                             leaderOptions.value=res.data.data;
                         }
                     })
             }
         })
}

const submit=ref('');

const beforeAddUser=()=>{
     dialogVisiable.value=true;
     dialogTitle.value="新建用户";
     submit.value="添加"
}
const changeStatus=(user)=>{
     axios.post(BASE_URL+'/v1/user/update/status/'+user.id+'/'+user.status)
         .then((res)=>{
             if (res.data.code===2000){
                 ElMessage.success("用户状态修改成功！");
             }
         })
}

const deleteUser=(id)=>{
    ElMessageBox.confirm(
        "你确定要删除该用户吗？",
        "警告",
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        axios.post(BASE_URL+'/v1/user/deleteUser/'+id)
            .then((res)=>{
                if (res.data.code===2000){
                    ElMessage.success("删除成功！")
                    loadUser();
                }
            })
    }).catch(()=>{
        ElMessage.info("已取消！")
    })
    
    
    
    
}

</script>



<style scoped>

</style>



